<template>
  <div class="container">
    <el-card class="box-card">
      <!-- 新增试题 -->
      <div class="clearfix header">
        <span data-v-48e452ac="" style="font-size: 12px; color: pink;">说明:目前支持学科和关键字条件筛选</span>
        <el-button style="float: right; padding: 3px 0" type="success" @click="$router.push('/questions/new')">
          <i class="el-icon-edit" style="margin-right:5px" />新增试题
        </el-button>
      </div>
      <!-- 筛选表单 -->
      <QuestionsChoiceFrom @Seach="handleSeach" />
      <!-- tabs栏 -->
      <!-- <QuestionsChoiceTabs /> -->
      <div class="choice-tabs">
        <!-- 标签栏部分 -->
        <el-tabs v-model="activeName" type="card" @tab-click="handleTabsChange">
          <!-- 显示数据条数 -->
          <div class="icon-info"><i class="el-icon-info" style="margin-right:8px" />数据一共 {{ total }} 条</div>
          <el-tab-pane label="全部" name="first" />
          <el-tab-pane label="待审核" name="second" />
          <el-tab-pane label="已审核" name="third" />
          <el-tab-pane label="已拒绝" name="fourth" />
          <!-- 表格部分 -->
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="number" label="试题编号" width="120" />
            <el-table-column prop="subject" label="学科" width="120" />
            <el-table-column prop="catalog" label="目录" width="120" />
            <el-table-column prop="questionType" label="题型" width="120">
              <template #default="{row}">
                {{ formatHireType(row.questionType) }}
              </template>
            </el-table-column>
            <el-table-column prop="question" label="题干" width="280">
              <template #default="{row}">
                <p v-html="row.question" />
              </template>
            </el-table-column>
            <el-table-column prop="addDate" label="录入时间" width="180">
              <template #default="{row}">
                {{ formattingTime(row.addDate) }}
              </template>
            </el-table-column>
            <el-table-column prop="difficulty" label="难度" width="80">
              <template #default="{row}">
                {{ formattingDifficulty(row.difficulty) }}
              </template>
            </el-table-column>
            <el-table-column prop="creator" label="录入人" width="120" />
            <el-table-column prop="chkState" label="审核状态" width="150">
              <template #default="{row}">
                {{ formattingChkState(row.chkState) }}
              </template>
            </el-table-column>
            <el-table-column prop="chkRemarks" label="审核意见" width="120" />
            <el-table-column prop="chkUser" label="审核人" width="150" />
            <!--  -->
            <el-table-column prop="publishState" label="发布状态" width="150">
              <template #default="{row}">
                {{ formattingPublish(row.publishState) }}
              </template>
            </el-table-column>
            <!--  -->
            <el-table-column fixed="right" label="操作" width="200">
              <template #default="{row}">
                <el-button type="text" size="small" @click="openDialog(row.id)">预览</el-button>
                <el-button :disabled="buttonChkState(row.chkState)" type="text" size="small" @click="openShowDialog(row.id)">审核</el-button>
                <el-button type="text" size="small" @click="$router.push('/questions/new?id=row.id')">修改</el-button>
                <el-button type="text" size="small" @click="handlePublish(row)">{{ row.publishState?"上架":"下架" }}</el-button>
                <el-button type="text" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 预览弹窗 -->
          <QuestionsChoiceDialog :dialog-visible.sync="dialogVisible" :give-dialog-date="giveDialogDate" />
          <!-- 审核弹窗 -->
          <el-dialog title="题目审核" :visible.sync="showDialog" width="40%" :before-close="handleClose">
            <el-form ref="ruleForm" :rules="rules" :model="form" label-width="100px">
              <el-form-item label-width="10px">
                <el-radio-group v-model="form.chkState">
                  <el-radio :label="1">通过</el-radio>
                  <el-radio :label="2">不通过</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label-width="10px" prop="chkRemarks">
                <el-input v-model="form.chkRemarks" placeholder="请输入审核意见" type="textarea" />
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="showDialog = false">取 消</el-button>
              <el-button type="primary" @click="handleAudit">确 定</el-button>
            </span>
          </el-dialog>
          <!-- 分页部分 -->
          <el-pagination :current-page="queryParams.page" :page-size="queryParams.pagesize" :page-sizes="[2, 5, 10, 20, 30,]" background layout="->, prev, pager, next,sizes, jumper" :total="total" @size-change="handleSizeChange" @current-change="changePage" />
        </el-tabs>
      </div>
    </el-card>
  </div>
</template>

<script>
import QuestionsChoiceFrom from '../components/questions-choice-from.vue'
// import QuestionsChoiceTabs from '../components/questions-choice-tabs.vue'
import moment from 'moment'
import { choice, choiceCheck, choicePublish } from '@/api/hmmm/questions'
import QuestionsChoiceDialog from '@/module-hmmm/components/questions-choice-dialog'
import { questionType, difficulty, chkType, publishType } from '@/api/hmmm/constants'
export default {
  components: {
    QuestionsChoiceFrom,
    // QuestionsChoiceTabs,
    QuestionsChoiceDialog
  },
  data () {
    return {
      rules: {
        chkRemarks: [{ required: true, message: '请输入审核意见', trigger: 'blur' }]
      },
      form: {
        id: null,
        chkState: 1,
        chkRemarks: null
      },
      radio: "通过",
      // 审核对话框状态位
      showDialog: false,
      // 对话框对应数据
      giveDialogDate: 1,
      // 预览对话框状态位
      dialogVisible: false,
      // tabs 首页加载状态位
      activeName: 'second',
      // 表格数据
      tableData: [],
      // 分页部分
      total: 4,
      queryParams: {
        page: 1, // 第几页
        pagesize: 5 // 多少条
      }
    };
  },
  computed: {
    // 计算获取数据条数
    // total () {
    //   return this.tableData.length
    // }
  },
  created () {
    this.getDate()
  },
  methods: {
    // 搜索
    handleSeach (val) {
      this.getDate(val)
    },
    // 分页切换
    handleSizeChange (val) {
      this.queryParams.pagesize = val
      this.getDate()
    },
    changePage (val) {
      this.queryParams.page = val
      this.getDate()
    },
    // 上下架功能
    async handlePublish (row) {
      const publish = row.publishState ? "上架" : "下架"
      const res = await this.$confirm(`确定${publish}这道题目吗`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => this.$message.warning('已取消下架'))
      try {
        if (res === 'confirm') {
          const isOK = row.publishState ? 0 : 1
          const ret = await choicePublish({ id: row.id, publishState: isOK })
          if (ret.status === 200) {
            this.getDate()
            this.$message.success(publish + '成功')
          }
        }
      } catch (err) {
        this.$message.error(publish + '失败')
      }
    },
    // 提交审核
    handleAudit () {
      this.$refs.ruleForm.validate(async valid => {
        if (!valid) return this.$message.warning('请输入审核意见')
        try {
          const ret = await choiceCheck(this.form)
          if (ret.status === 200) {
            this.getDate()
            this.showDialog = false
            this.$refs.ruleForm.resetFields()
            this.$message.success('提交审核成功')
          }
        } catch (error) {
          this.$message.error('审核失败')
        }
      })
    },
    // 打开审核弹框
    openShowDialog (id) {
      this.showDialog = true
      this.form.id = id
    },
    // 关闭审核弹窗
    handleClose () {
      this.showDialog = false
      this.$refs.ruleForm.resetFields()
    },
    // 打开预览弹窗
    openDialog (id) {
      this.dialogVisible = true
      this.giveDialogDate = id
    },
    // 格式化审核按钮状态
    buttonChkState (val) {
      if (val === 1) {
        return false
      } else {
        return true
      }
    },
    // 格式化审核状态
    formattingPublish (val) {
      const ret = publishType.find(item => item.value === parseInt(val + 1));
      if (ret) {
        return ret.label
      } else {
        return '其他'
      }
    },
    // 格式化审核状态
    formattingChkState (val) {
      const ret = chkType.find(item => item.value === parseInt(val));
      if (ret) {
        return ret.label
      } else {
        return "已拒绝"
      }
    },
    // 格式化难度
    formattingDifficulty (val) {
      const ret = difficulty.find(item => item.value === parseInt(val));
      if (ret) {
        return ret.label
      } else {
        return '其他'
      }
    },
    // 格式化时间
    formattingTime (val) {
      return moment(val).format('YYYY-MM-DD HH:mm:ss')
    },
    // 格式化题型数据
    formatHireType (val) {
      const ret = questionType.find(item => item.value === parseInt(val));
      if (ret) {
        return ret.label
      } else {
        return '其他'
      }
    },
    // 初始化数据
    async getDate (date) {
      const ret = await choice({
        ...date,
        ...this.queryParams
      })
      if (ret.status === 200) {
        this.tableData = ret.data.items
        this.total = ret.data.counts
        console.log(date);
        console.log(ret);
        console.log(this.tableData);
      }
    },
    // tabs栏切换
    handleTabsChange ({ index }) {
      const res = Number(index)
      if (res === 0) {
        this.getDate()
      } else if (res === 1) {
        this.getDate({ chkState: index })
      } else if (res === 2) {
        this.getDate({ chkState: index })
      } else if (res === 3) {
        this.getDate({ chkState: 0 })
      }
    }
  }
}
</script>

<style scoped lang='less'>
.container {
  .box-card {
    margin: 0.625rem;
    .header {
      height: 2rem;
      margin-bottom: 15px;
      .el-button {
        width: 6.0625rem;
        height: 100%;
      }
    }
  }
}
.choice-tabs {
  .icon-info {
    width: 100%;
    padding: 8px 16px;
    background-color: rgb(244, 244, 245);
    color: rgb(144, 147, 153);
    font-size: 13px;
    margin-bottom: 15px;
  }
  .el-table {
    margin-bottom: 20px;
  }
}
</style>
